<!--
 * @Author: your name
 * @Date: 2021-07-30 11:06:44
 * @LastEditTime: 2021-07-30 11:08:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \单词\vue3的显示坐标与自增.vue
-->
<template>
  <div class="container">
    <p>X轴：{{x}}</p>
    <p>Y轴：{{y}}</p>
    <hr>
    <p>{{count}} <button @click="updateCount">加加</button></p>
  </div>
</template>
<script>
import { onBeforeUnmount, onMounted, reactive, ref, toRefs } from 'vue'

// 提供鼠标坐标业务逻辑
const useMouse = () => {
  // 申明数据
  const obj = reactive({
    x: 0,
    y: 0
  })
  // 移动鼠标
  const move = e => {
    obj.x = e.pageX 
    obj.y = e.pageY
  }
  // 监听mousemove事件
  onMounted(()=>{
    document.addEventListener('mousemove', move)  
  })
  // 清除mousemove事件
  onBeforeUnmount(()=>{
    document.removeEventListener('mousemove', move)
  })
  return obj
}

// 提供数据自增业务逻辑
const useCount = () => {
  const count = ref(0)
  const updateCount = () => {
    count.value ++
  }
  return { count, updateCount}
}

export default {
  name: 'App',
  setup () {
    // 1. 鼠标在页面移动，记录鼠标的坐标，显示。
    const obj = useMouse()

    // 2. 点击按钮自增
    const {count, updateCount} = useCount()

    return { ...toRefs(obj) , count, updateCount}
  }
}
</script>
<style scoped lang="less"></style>
